<template>
    <div class="login-box">
        <div class="login-box-left">
            <img src="@/assets/images/login/bg.png" class="text" />
        </div>
        <div class="login-box-right">
            <div class="login-form">
                <img src="@/assets/images/login/logo.png" class="login-logo" />
                <div class="login-input">
                    <a-input placeholder="请输入账号" class="large-input" v-model:value="loginData.loginId">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-user.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input type="password" placeholder="请输入密码" class="large-input" v-model:value="loginData.loginPw">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-pwd.png" />
                        </template>
                    </a-input>
                </div>
                <!-- <div class="login-input">
                    <a-input placeholder="请输入验证码" class="large-input" v-model:value="loginData.imageCode">
                    </a-input>
                    <img src="/generateImageVerifyCode.do + {{loginData.imageVerifyCodeId}}" class="code-image" />
                </div> -->
                <div style="text-align:left;">
                    <a-checkbox class="remember" >记住密码</a-checkbox>
                    <!-- <router-link to="/forgetPwd" class="forget">忘记密码</router-link> -->
                </div>
                <div>
                    <a-button type="primary"  class="login-btn" @click="login()" >登录</a-button>
                    <!-- <router-link to="/register">免费注册</router-link> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import {Input,Checkbox,Button} from "ant-design-vue";
export default {
    components:{
        AInput:Input,
        ACheckbox:Checkbox,
        AButton:Button
    }, 
    data() {
        return {
            loginData:{
                loginId:'',
                loginPw:'',
                imageCode:'',
                imageVerifyCodeId:'',
            },
            isLoading:true,
            imgData:'',
            remember:true
        };
    },
    created(){

    },
    mounted() {
        httpRequest.post("生成图形验证码唯一id", {}).then(res => {
            console.log(res,'res.data.imageVerifyCodeId');
            this.loginData.imageVerifyCodeId = res.data.imageVerifyCodeId;
            // httpRequest.get("生成图形验证码", { imageVerifyCodeId: res.data.imageVerifyCodeId }).then((res) => {
            //     console.log(res);
            // });
        });
    },
    methods: {
        login(){
            
             httpRequest.post("登录", this.loginData).then((res) => {
                 localStorage.setItem("token",res.data.token)
                 localStorage.setItem("user",JSON.stringify(res.data))
                 this.$router.push("/home");
            });
        }
    },
};
</script>

<style lang="less" scoped>
.login-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: #378EF0;

    &-left{
        flex: 100;
        height: 100%;
        background:#378EF0;
        position: relative;
        .text{
            position: absolute;
            left: 60px;
            top: 80px;
        }
    }
    &-right{
        width: 660px;
        height: 840px;
        margin: 30px;
        background: #FFFFFF;
        border-radius: 20px;
        .login-logo{
            margin-bottom: 60px;
        }
        .login-form{
            width: 480px;
            display: block;
            margin:100px auto;
            .forget{
                float: right;
            }
            .remember{
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }
            .login-input{
                margin-bottom: 30px;
                display: flex;
                .code-image{
                    width: 112px;
                    height: 48px;
                    margin-left: 10px;
                }
            }
        }
        .large-input{
            padding: 12px 11px;
            border-radius:5px;
        }
        .login-btn{
            height: 48px;
            line-height: 48px;
            padding:0;
            border-radius: 10px;
            margin-top: 85px;
            margin-bottom: 15px;
            font-size: 20px;
        }
    }
}
</style>
